<script setup lang="ts">
import gsap from 'gsap'

onMounted(() => {
  gsap.fromTo(
    '#heading',
    {
      opacity: 0,
      x: '-100%'
    },
    {
      duration: 1.5,
      opacity: 1,
      x: 0,
    }
  )

  gsap.fromTo(
    '#description',
    {
      opacity: 0,
      x: '-100%'
    },
    {
      duration: 1.5,
      opacity: 1,
      x: 0,
      ease: 'power3.inOut',
      delay: 0.5,
    }
  )

  gsap.fromTo(
    '.main-btn',
    {
      opacity: 0,
      y: '100%'
    },
    {
      duration: 1.5,
      opacity: 1,
      y: 0,
      delay: 1.3,
      ease: 'power3.inOut',
      stagger: 0.1,
    }
  )

  gsap.fromTo(
    '#downArrow',
    {
      opacity: 0,
      y: '100%'
    },
    {
      duration: 1.5,
      opacity: 1,
      y: 0,
      delay: 2,
      ease: 'power3.inOut'
    },
  )

  gsap.fromTo(
    '#imageLeft',
    {
      opacity: 0,
      y: 100,
      rotation: 10,
    },
    {
      duration: 1.5,
      opacity: 1,
      y: 0,
      rotation: -3,
      ease: 'power3.inOut',
      delay: 2.5,
    }
  )

  gsap.fromTo(
    '#imageRight',
    {
      transformOrigin: 'bottom right',
      rotation: 20,
      opacity: 0,
      y: -100,
    },
    {
      duration: 1.5,
      opacity: 1,
      y: 0,
      rotation: 3,
      ease: 'power3.inOut',
      delay: 3,
    }
  )
})
</script>

<template>
  <div class="flex">
    <div class="w-1/2 p-16">
      <div class="mt-32">
        <h1
          id="heading"
          class="from-green-400 to-green-600 bg-gradient-to-br bg-clip-text text-7xl text-transparent font-bold md:text-70px"
        >
          Explore and share your observations from nature
        </h1>
        <p id="description" class="mt-8 text-10px text-gray-600 md:text-20px md:leading-24px">
          Lorem ipsum dolor sit amet consectetur, adipisicing elit. Sint
          temporibus similique id impedit voluptatem optio unde iusto, nisi
          animi dolorum repellendus assumenda ea maiores expedita necessitatibus
          vitae cum sapiente perspiciatis eos accusamus illo magni eligendi
          nihil velit? Optio pariatur, rem reprehenderit odio sequi neque
          repudiandae voluptatum in voluptatem doloremque eligendi.
        </p>
        <div class="mt-16 flex">
          <button
            class="main-btn w-48 rounded-lg from-green-200 via-green-400 to-green-500 bg-gradient-to-br p-4 text-white shadow-green-400/60 shadow-lg md:w-160"
          >
            <p class="text-lg font-semibold md:text-7xl">
              Explore nature
            </p>
          </button>
          <button
            class="main-btn ml-4 w-48 border-2 border-green-400 rounded-lg p-4 text-green-500 shadow-green-400/60 shadow-lg md:w-160"
          >
            <p class="text-lg font-semibold md:text-7xl">
              Learn more
            </p>
          </button>
        </div>
        <div class="mt-16">
          <div
            id="downArrow"
            class="h-24 w-24 flex items-center justify-center rounded-full from-green-200 via-green-400 to-green-500 bg-gradient-to-br shadow-green-400/60 shadow-lg md:h-50 md:w-50"
          >
            <svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" class="h-12 w-12 text-white md:h-24 md:w-24" viewBox="0 0 16 16">
              <path
                fill-rule="evenodd"
                d="M8 1a.5.5 0 0 1 .5.5v11.793l3.146-3.147a.5.5 0 0 1 .708.708l-4 4a.5.5 0 0 1-.708 0l-4-4a.5.5 0 0 1 .708-.708L7.5 13.293V1.5A.5.5 0 0 1 8 1z"
              />
            </svg>
          </div>
        </div>
      </div>
    </div>

    <div class="relative w-1/2 p-16">
      <div class="absolute inset-0 from-green-200 via-green-400 to-green-500 bg-gradient-to-br blur-xl"></div>
      <div class="relative z-10 grid grid-cols-12 mt-24" style="grid-template-rows: 150px 1fr">
        <img id="imageLeft" class="col-span-5 rounded-lg" src="/image1.jpg" alt="Large waterfall in the mountains" />
        <img
          id="imageRight" class="col-span-5 col-start-5 rounded-lg" src="/image2.jpg"
          alt="Misty pathway through a forest"
        />
      </div>
    </div>
  </div>
</template>

<style scoped></style>
